<template>
  <div>
    <el-dialog
      v-model="visible"
      title="订单取消审核"
      @before-ok="createOk"
      @close="close(createRef)"
      width="700px"
      top="100px"
    >
      <el-alert title="提示" type="warning" :closable="false">
        <template #default>
          <div>当前买家已付款并申请取消订单，请审核。</div>
          <div>如同意则自动退回付款金额（原路退款）并关闭订单。</div>
        </template>
      </el-alert>
      <el-form
        :model="createForm"
        ref="createRef"
        label-width="120px"
        size="default"
        v-loading="initLoading"
        class="mt50"
      >
        <el-form-item label="审核状态：" prop="is_cancel">
          <el-radio-group v-model="createForm.is_cancel">
            <el-radio :label="1" border>同意</el-radio>
            <el-radio :label="0" border>拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="flex center">
          <el-button @click="visible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="btnLoading"
            :disabled="btnLoading"
            @click="createOk(createRef)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
export default {
  name: "storeOrderCancel",
  components: { help },
};
</script>
  <script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive } from "vue";
import type { FormInstance } from "element-plus";
import type { Result, ResultError } from "@/types";
import { cancelOrder } from "@/api/store/order";
import { help } from "@/components";
import { create } from '@/api/system/menus';

const {
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["success"]);

const visible = ref<boolean>(false);

const operationId = ref<number>(0);

const createRef = ref<typeof FormInstance>();

const btnLoading = ref<boolean>(false);

const initLoading = ref<boolean>(true);

const createForm = ref<any>({
  is_cancel: 0,
});

const toInit = () => {
  initLoading.value = false;
};

const createOk = async (formEl: typeof FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (btnLoading.value) {
        return;
      }
      btnLoading.value = true;
      cancelOrder({
        id: operationId.value,
        is_cancel: createForm.value.is_cancel,
      })
        .then((res: Result) => {
          $utils.successMsg(res);
          emit("success");
          close();
        })
        .catch((err: ResultError) => {
          $utils.errorMsg(err);
          close();
        });
    }
  });
};

const open = (id: number = 0) => {
  initLoading.value = true;
  if (id != 0) {
    operationId.value = id;
  }
  nextTick(() => {
    toInit();
  });
  visible.value = true;
};

const close = async (formEl: typeof FormInstance | undefined = undefined) => {
  if (formEl) {
    formEl.resetFields();
  }
  operationId.value = 0;
    btnLoading.value = false;
  visible.value = false;
};

defineExpose({ open });
</script>